<template>
    <view class="content">
        <view class="nav">
			<view class="nav-i" :class="{active : type == 1}" @click="chooseNav(1)">待领取</view>
			<view class="nav-i" :class="{active : type == 2}" @click="chooseNav(2)">待使用</view>
			<view class="nav-i" :class="{active : type == 3}" @click="chooseNav(3)">已使用</view>
			<view class="nav-i" :class="{active : type == 4}" @click="chooseNav(4)">已过期</view>
		</view>
		
		<view class="wrapper">
			<view class="item" v-for="(item, index) in 3" :key="index">
				<view class="top">
					<view class="u-flex-1">
						<view class="u-flex">
							<view class="icon" :class="{Nactive : type == 3 || type == 4}">新人券</view>
							<view class="title">注册赠送券</view>
						</view>
						<view class="time">有效期至2020.10.12 08:30</view>
					</view>
					<view class="right">
						<view class="price" :class="{Pactive : type == 3 || type == 4}">
							58<text class="u-font-26">元</text>
						</view>
						<view>满86可用</view>
					</view>
				</view>
				<view class="down">
					<view @click="open(item)">
						使用规则<u-icon name="arrow-right" color="#727272" size="24"></u-icon>
					</view>
					<view class="btn" v-if="type == 1">领取</view>
					<view class="btn" v-if="type == 2">去使用</view>
					<view class="btn btn2" v-if="type == 3">已使用</view>
					<view class="btn btn2" v-if="type == 4">已过期</view>
				</view>
			</view>
		</view>
		
		<!-- 使用规则 -->
		<u-popup v-model="show" mode="center" border-radius="30">
			<view class="rule-frame">
				<view class="rule-frame-tit">使用规则</view>
				<view>
		            <scroll-view scroll-y="true" style="height: 40vh;">
		                <view class="privacy-txt">
		                    <rich-text :nodes="rule"></rich-text>
		                </view>
		            </scroll-view>
				</view>
				<view class="rule-btn" @click="show = false">我知道了</view>
			</view>
		</u-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                type: 1,
				show: false,
				rule: '好友通过您的邀请码注册成为会员后，Ta即成为您的会员，未来Ta及Ta发展的买家下单时产生的消费佣金均计入您的账户中',
            };
        },
        onLoad() {
            
        },
        methods: {
            chooseNav(num) {
				this.type = num
			},
			
			open(item) {
				this.show = true
			},
        }
    };
</script>

<style lang="scss">
	
    page{
        background-color: #f5f5f5;
    }
	.nav{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
	}
	.nav-i{
		width: calc(100vw / 4);
		text-align: center;
		font-size: 30rpx;
		padding: 25rpx 0;
	}
	.active{
		color: #2558ab;
		position: relative;
	}
	.active::after{
		display: block;
		content: '';
		width: 32rpx;
		height: 8rpx;
		background-color: #2558ab;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.wrapper{
		padding: 20rpx;
	}
	.item{
		background-color: #fff;
		padding: 40rpx 25rpx 12rpx;
		margin-bottom: 20rpx;
	}
	.top{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 30rpx;
	}
	
	.icon{
		font-size: 20rpx;
		color: #fff;
		padding: 4rpx 8rpx;
		background-color: #01c361;
		border-radius: 6rpx;
		margin-right: 15rpx;
	}
	.title{
		flex: 1;
		font-size: 34rpx;
		font-weight: bold;
	}
	.time{
		font-size: 26rpx;
		color: #515151;
		padding-top: 8rpx;
	}
	.right{
		font-size: 24rpx;
	}
	.price{
		font-size: 64rpx;
		color: #fe4d01;
	}
	.Nactive{
		background-color: #ababab;
	}
	.Pactive{
		color: #393939;
	}
	.down{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 12rpx;
		border-top: 2rpx dashed #e6e6e6;
		font-size: 24rpx;
	}
	.btn{
		font-size: 24rpx;
		color: #fff;
		padding: 12rpx 25rpx;
		border-radius: 6rpx;
		background-color: #2558ab;
	}
	.btn2{
		background-color: #ababab;
	}
	
	// 规则介绍
	.rule-frame {
		width: 626rpx;
		background-color: #fff;
		padding: 40rpx 30rpx;
	}
	.rule-frame-tit {
		font-size: 32rpx;
	    font-weight: bold;
		line-height: 34rpx;
		color: #000000;
		text-align: center;
		margin-bottom: 40rpx;
	}
	.privacy-txt {
	    font-size: 26rpx;
	    color: #949494;
	}
	.rule-btn {
		width: 372rpx;
		height: 80rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		color: #fff;
		text-align: center;
		background-color: #2658aa;
		border-radius: 50rpx;
		margin: 30rpx auto 0;
	}
	

</style>
